$blue-color: #0062FF;

:root {
    /* 标题 */
    --vp-home-hero-name-color: transparent;
    --vp-home-hero-name-background: #0062FF;

    /* brand按钮 */
    --vp-button-brand-border: #0062FF;
    --vp-button-brand-text: #fff;
    --vp-button-brand-bg: #0062FF;

    --vp-button-brand-hover-border: #0062FF;
    --vp-button-brand-hover-text: #fff;
    --vp-button-brand-hover-bg: #0062FF;

    --vp-button-brand-active-border: #0062FF;

    --vp-custom-block-tip-border: #0062FF;
    --vp-custom-block-tip-text: #0062FF;
    --vp-custom-block-tip-bg: #0062FF;

    --vp-c-brand: #0062FF;
    --vp-c-brand-dark: #0012FF;
}

.VPFeature {
  .icon {
    color: white !important;
    background-color: rgba($blue-color, 0.5) !important;
    width: 6rem !important;
    font-size: 14px;
    text-align: justify;
  }
}

.VPNavBarAppearance {
    display: none !important;
}


@keyframes rotate-container {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.VPHero {
  position: relative;
  .text {
    font-size: 2rem !important;
  }
  .image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    .VPImage {
      // animation: rotate-container 5s linear infinite;
    }
  }
}

.image-bg, .image-src {
  margin-top: 1.7rem;
  width: 16rem;
}

.vp-doc {
  min-height: calc(100vh - 19rem);
  h1 {
    margin-bottom: 2rem;
    margin-top: 0;
  }
  h2 {
    margin-top: 1.5rem;
  }
  h3, h4, h5 {
    margin-top: 1.2rem;
  }
}

.VPFeature {
  .icon {
    background-color: transparent;
    color: $blue-color;
    font-weight: bold;
  }
}

$scroll-width: 7px;
::-webkit-scrollbar {
  width: $scroll-width;
  height: $scroll-width;
  background-color: #eee;
}
::-webkit-scrollbar-track {
  background-color: #eee;
}
::-webkit-scrollbar-thumb {
  background: #c7c7c7;
  border-radius: $scroll-width;
}

img {
  margin: 0.8rem 0;
}

body {
  min-width: 20rem;
  position: relative;
}

.vp-doc div[class*='language-'] {
  max-height: 25rem;
}

.VPLink {
  p.text {
    display: inline-block;
  }
}

.vp-doc blockquote {
  margin-top: 2rem;
}

.group h2.text {
  color: #a9a9a9 !important;
  font-weight: normal !important;
}

.VPDoc.has-aside {
  span.lang {
    display: none;
  }
  table {
    display: table;
    width: 100% !important;
  }
  h1 {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 1.5rem;
    margin-bottom: 0;
  }
  h2 {
    // height: 0;
    margin-top: 1.5rem;
    // position: relative;
    // color: transparent;
    border-top: none;
    font-size: 1.3rem;
    // &::after {
    //   content: attr(id);
    //   position: absolute;
    //   left: calc(50% - 5rem);
    //   top: -1rem;
    //   padding: 0;
    //   background-color: #eee;
    //   border-radius: 0.3rem;
    //   width: 10rem;
    //   text-align: center;
    //   color: #222;
    //   font-size: 0.9rem;
    //   font-weight: bold;
    //   letter-spacing: 0.2rem;
    // }
  }
  .header-anchor {
    display: none;
  }
}

.VPNavBar {
  .curtain {
    border-top: 2px solid #ececec;
  }
}

.el-tabs {
  margin-top: 2rem;
}

.el-tabs--border-card .el-tabs__content {
  padding-left: 28px;
}

.VPDocFooter {
  margin-top: 2rem !important;
  .prev-next {
    padding-top: 2rem;
  }
}
.VPFooter {
  background-color: transparent !important;
  border-top: none;
}